<!-- 使用Export2Excel.js下载Excel -->
<template>
<div class="e2e-wp">
  
  <div class="btn-box">
    <el-button @click="downExcel()">下载Excel</el-button>
  </div>
  
  <el-table :data="table.data" style="width: 100%">
    <el-table-column v-for="(aItem, aIdx) in table.head" :key="aIdx"
      :prop="aItem.key"
      :label="aItem.label"
      :min-width="aItem.width || 80"
      align="center">
      <el-table-column v-if="aItem.children" v-for="(bItem, bIdx) in aItem.children" :key="bIdx"
        :prop="bItem.key"
        :label="bItem.label"
        :min-width="bItem.width || 80"
        align="center">
        <el-table-column v-if="bItem.children" v-for="(cItem, cIdx) in bItem.children" :key="cIdx"
          :prop="cItem.key"
          :label="cItem.label"
          :min-width="cItem.width || 80"
          align="center">
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>

</div>
</template>
<script>

import $downExcel from "@/utils/downExcel";

export default {
  name: 'e2e',
  data () {
    return {
      tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],

      table: {
        head: [
          {label: '时间', key: 'time'},
          {label: '姓名', key: 'name'},
          {label: '学校', key: 'school'},
          {label: '成绩', children: [
            {label: '语文', children: [
              {label: '总分', key: 'yw_total'},
              {label: '选择题', key: 'yw_xzt'},
              {label: '阅读理解', key: 'yw_ydlj'},
              {label: '作文', key: 'yw_zw'}
            ]},
            {label: '数学', children: [
              {label: '总分', key: 'sx_total'},
              {label: '选择题', key: 'sx_xzt'},
              {label: '判断题', key: 'sx_pdt'},
              {label: '应用题', key: 'sx_yyt'}
            ]}
          ]},
          {label: '联系方式', children: [
            {label: '父母移动电话', key: 'mobile'},
            {label: '座机', key: 'telphone'}
          ]}
        ],
        data: [
          {time: '2021-11-11', name: '王小月', school: '铜梁中学', yw_total: '90', yw_xzt: '30', yw_ydlj: '35', yw_zw: '25', sx_total: '94', sx_xzt: '25', sx_pdt: '35', sx_yyt: '34', mobile: '18912345677', telphone: '453-17654321'},
          {time: '2021-11-12', name: '张大方', school: '重庆一中', yw_total: '90', yw_xzt: '30', yw_ydlj: '35', yw_zw: '25', sx_total: '94', sx_xzt: '25', sx_pdt: '35', sx_yyt: '34', mobile: '18912345677', telphone: '453-17654321'},
          {time: '2021-11-13', name: '久久', school: '巴川中学', yw_total: '90', yw_xzt: '30', yw_ydlj: '35', yw_zw: '25', sx_total: '94', sx_xzt: '25', sx_pdt: '35', sx_yyt: '34', mobile: '18912345677', telphone: '453-17654321'},
        ]
      }
    }
  },
  mounted () {

  },
  methods: {

    // 下载excel
    downExcel () {
      $downExcel(this.table, '学生成绩单');
    },
  }
}
</script>
<style lang="scss" scoped>
.e2e-wp {
  padding: 50px;
  .btn-box {
    text-align: right;
    padding-bottom: 20px;
  }
}
</style>